<template>
  <div id="app">
    <ul>
      <li v-for="(item,index) in myArr" :key="index">{{item}}</li>
    </ul>
    <button @click="btn">走一走</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      myArr: ["帅哥", "美女", "程序猿"],
    };
  },
  methods: {
    btn() {
      // 头部数据加入到末尾
     this.myArr.push(this.myArr[0])
      
      // 再把头部的数据删除掉，头部删除的方法是shift(),头部增加的方法是unshift(),尾部删除的方法是pop(),尾部增加的方法是push()
      this.myArr.shift()
     
    },
  },
};
</script>

<style>
</style>
